<!-- SPDX-License-Identifier: GPL-3.0-or-later
License: GNU GPLv3 or later. See the license file in the project root for more information.
Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sigma File Manager | Quick view</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
    }

    #content-container {
      width: 100%;
      height: 100%;
    }

    webview,
    video,
    img {
      width: 100%;
      height: 100%;
    }

    @media (prefers-color-scheme: dark) {
      webview {
        background-color: rgb(36, 38, 44);
      }
    }

    @media (prefers-color-scheme: light) {
      webview {
        background-color: white;
      }
    }

    video {
      outline: none;
    }

    img {
      object-fit: contain;
    }
  </style>
</head>

<body>
  <div id="window-toolbar"></div>
  <div id="content-container"></div>
  <script type="module">
    const electron = require('electron')
    let sharedUtils = process.env.NODE_ENV === 'development'
      ? require('../src/utils/sharedUtils.js')
      : require('./src/utils/sharedUtils.js')
    let contentContainerNode = document.querySelector('#content-container')
    let state = {
      isCanceled: false
    }

    initListeners()

    function adjastWindowToContentSize (fileWidth, fileHeight) {
      if (fileWidth && fileHeight && fileWidth > 0 && fileHeight > 0) {
        try {
          if (fileWidth > fileHeight) {
            const ratio = fileWidth / fileHeight
            electron.ipcRenderer.invoke('quick-view::set-content-size', {
              width: 1280,
              height: Math.round(1280 / ratio)
            })
          }
          else {
            const ratio = fileHeight / fileWidth
            electron.ipcRenderer.invoke('quick-view::set-content-size', {
              width: Math.round(720 / ratio),
              height: 720
            })
          }
        }
        catch (error) {
          console.log(error)
        }
      }
    }

    function showWindow () {
      // Wait before showing the window in case the file is not supported
      // Otherwise window will flash (close soon after being opened)
      setTimeout(() => {
        if (!state.isCanceled) {
          electron.ipcRenderer.invoke('quick-view::show-window')
        }
      }, 200)
    }

    function renderFile (params) {
      if (params.fileType.mimeDescription === 'video') { renderVideoNode(params.data) }
      else if (params.fileType.mimeDescription === 'image') { renderImageNode(params.data) }
      else { renderOtherFileTypeNode(params.data) }
    }

    function renderVideoNode (data) {
      let videoNode = document.createElement('video')
      videoNode.setAttribute('src', sharedUtils.getUrlSafePath(data.path))
      videoNode.setAttribute('controls', true)
      videoNode.setAttribute('autoplay', true)
      contentContainerNode.appendChild(videoNode)
      videoNode.addEventListener('resize', event => {
        let fileWidth = videoNode.videoWidth
        let fileHeight = videoNode.videoHeight
        adjastWindowToContentSize(fileWidth + 24, fileHeight)
        setBodyNodeMediaStyles()
      }, false)
    }

    function renderImageNode (data) {
      let imageNode = document.createElement('img')
      imageNode.setAttribute('src', sharedUtils.getUrlSafePath(data.path))
      contentContainerNode.appendChild(imageNode)
      imageNode.addEventListener('load', event => {
        let fileWidth = imageNode.naturalWidth
        let fileHeight = imageNode.naturalHeight
        adjastWindowToContentSize(fileWidth, fileHeight)
        setBodyNodeMediaStyles()
      }, false)
    }

    function setBodyNodeMediaStyles () {
      document.querySelector('body').style.width = 'auto'
      document.querySelector('body').style.height = 'auto'
      document.querySelector('body').style.overflow = 'hidden'
    }

    function renderOtherFileTypeNode (data) {
      let webviewNode = document.createElement('webview')
      webviewNode.setAttribute('id', 'content-webview')
      webviewNode.setAttribute('partition', 'persist:quickView')
      webviewNode.setAttribute('src', sharedUtils.getUrlSafePath(data.path))
      contentContainerNode.appendChild(webviewNode)
    }

    function initListeners () {
      window.addEventListener('keydown', (event) => {
        if (event.code === 'Space' || event.code === 'Escape') {
          event.preventDefault()
          electron.ipcRenderer.invoke('quick-view::close-window')
        }
      })

      electron.ipcRenderer.on('load:webview', (event, data) => {
        const fileType = sharedUtils.getFileType(data.path)
        renderFile({ data, fileType })
        showWindow()
      })

      electron.ipcRenderer.on('load:webview::cancel', (event, data) => {
        state.isCanceled = true
      })
    }
  </script>
</body>

</html>